import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, hashHistory, IndexRoute } from 'react-router';
import App from './components/App/App';
import Home from './components/Home/Home';
import Repos from './components/Repos/Repos';
import About from './components/About/About';
import User from './components/User/User';
import Contacts from './components/Contacts/Contacts';
import Todo from './components/Todo';

ReactDOM.render((
    <Router history = {hashHistory}>
        <Route path = '/' component = {App}>
            <IndexRoute component = {Home}></IndexRoute>
            <Route path = '/repos/:name' component = {Repos}></Route>
            <Route path = '/about' component = {About}></Route>
            <Route path = '/user' component = {User}></Route>
            <Route path = '/contacts' component = {Contacts}></Route>
            <Route path = '/todo' component = {Todo}></Route>
        </Route>
    </Router>
    ), document.getElementById('app'));

// const routes = (
//     <Route path="/" component={App}>
//         <IndexRoute component={Home} />
//         <Route path="/repos/:name" component={Repos} />
//         <Route path="/about" component={About} />
//         <Route path="/user" component={User} />
//         <Route path="/contacts" component={Contacts} />
//     </Route>
// );

// ReactDOM.render(
//     <Router routes = {routes} history = {hashHistory} />,
//     document.getElementById('app')
// );



















// //  注意组件开头第一个字母都要大写
// class App extends React.Component {
//     constructor(props) {
//         super(props);
//         this.state = {

//         };
//     }
//     render() {
//         return (
//             <div>
//                 <h1>Hello,World!</h1>
//             </div>
//         );
//     }
// }

// class MyComponent extends React.Component {
//     render() {
//         return (
//             <div style = {divStyle}>
//                 Hello,World,hehe~
//             </div>
//         );
//     }
// }

// // PropTypes 验证，若传入的 props type 不符合将会显示错误
// MyComponent.propTypes = {
//     todo: React.PropTypes.object,
//     name : React.PropTypes.string,
// }

// // Prop 预设值，若对应 props 没传入值将会使用 default 值
// MyComponent.defaultProps = {
//     todo: {},
//     name: '',
// }

// const divStyle = {
//     color: 'red',
//     background: "#e6e6e6",
// };

// var props = {
//     style: {
//         width: '50%',
//         margin: '0 auto',
//         fontSize: '20px',
//     },
//     className: 'message',
//     value: '1',
// }


// //props
// const list = ['JavaScript', 'Java', 'Node', 'Python'];

// class HelloMessage extends React.Component {
//     render() {
//         return (
//             <ul {...props}>
//                 {list.map((result, index) => {
//                     return (<li key = {index} style = {{listStyle: 'none'}}> {result} </li>)
//                 })}
//             </ul>
//         );
//     }
// }

// class HelloMessageAgain extends React.Component {
//     constructor(props) {
//         super(props);
//         this.state = {}
//     }
//     render() {
//         return (
//             <div>Hello,{this.props.name}</div>
//         )
//     }
// }

// HelloMessageAgain.propTypes = {
//     name: React.PropTypes.string,
// }

// HelloMessageAgain.defaultProps = {
//     name: 'bowiego',
// }

// const HelloMessageAgainFunctional = (props) => (
//     <div>Hello,{props.name}</div>
// )

// HelloMessageAgainFunctional.propTypes = {
//     name : React.PropTypes.string,
// }

// HelloMessageAgainFunctional.defaultProps = {
//     name : 'bowiego from Functional Component',
// }

// //state
// class Timer extends React.Component {
//     constructor(props) {
//         super(props);
//         this.tick = this.tick.bind(this);
//         this.state = {
//             secondElapsed: 0,
//         }
//     }
//     tick() {
//         this.setState({secondElapsed: this.state.secondElapsed + 1});
//     }
//     componentDidMount() {
//         this.interval = setInterval(this.tick, 1000);
//     }
//     componentWillUnmount() {
//         clearInterval(this.interval);
//     }
//     render() {
//         return (
//             <div>{this.state.secondElapsed}</div>
//         )
//     }
// }

// //事件处理
// //Functional Component 仅设计UI
// const TodoList = (props) => (
//     <ul>
//         {
//             props.items.map((item) => (
//                 <li key={item.id}>{item.text}</li>
//             ))
//         }
//     </ul>
// )

// class TodoApp extends React.Component {
//     constructor(props) {
//         super(props);
//         this.onChange = this.onChange.bind(this);
//         this.handleSubmit = this.handleSubmit.bind(this);
//         this.remove = this.remove.bind(this);
//         this.state = {
//             items: [],
//             text: '',
//         };
//     }
//     onChange(e) {
//         this.setState({text: e.target.value});
//     }
//     handleSubmit(e) {
//         e.preventDefault();
//         const nextItems = this.state.items.concat([{text: this.state.text, id: Date.now()}]);
//         const nextText = '';
//         this.setState({items: nextItems, text: nextText});
//     }
//     remove(e) {
//         // e.preventDefault();
//         console.log(this.state.items);
//         this.state.items.pop();
//         // console.log(nextItems);
//         this.setState({items: this.state.items, text: ''});
//     }
//     render() {
//         return (
//             <div>
//                 <h3>TODO</h3>
//                 <TodoList items = {this.state.items} />
//                 <form onSubmit = {this.handleSubmit}>
//                     <input onChange = {this.onChange} value = {this.state.text} />
//                     <button>{'Add#' + (this.state.items.length + 1)}</button>
//                 </form>
//                 <button onClick = {this.remove}>{'Remove#' + (this.state.items.length)}</button>
//             </div>
//         )
//     }
// }

// class MarkdownEditor extends React.Component {
//     constructor(props) {
//         super(props);
//         this.handleChange = this.handleChange.bind(this);
//         this.rawMarkup = this.rawMarkup.bind(this);
//         this.state = {
//             value: '在这里输入markdown文本',
//         }
//     }
//     handleChange() {
//         this.setState({value: this.refs.textarea.value});
//     }
//     rawMarkup() {
//         const md = new Remarkable();
//         return {__html: md.render(this.state.value)};
//     }
//     render() {
//         return (
//             <div className = 'MarkdownEditor'>
//                 <h3>输入</h3>
//                 <textarea 
//                     onChange = {this.handleChange}
//                     ref = 'textarea'
//                     defaultValue = {this.state.value} />
//                 <h3>输出</h3>
//                 <div 
//                     className = 'content' 
//                     dangerouslySetInnerHTML = {this.rawMarkup()} />
//             </div>
//         )
//     }
// }

// //生命周期
// class ComponentLife extends React.Component {
//   constructor(props) {
//     super(props);
//     console.log('constructor');
//     this.handleClick = this.handleClick.bind(this);
//     this.state = {
//       name: 'Mark',
//     }
//   }
//   handleClick() {
//     this.setState({'name': 'Zuck'});
//   }
//   componentWillMount() {
//     console.log('componentWillMount');
//   }
//   componentDidMount() {
//     console.log('componentDidMount');
//   }
//   componentWillReceiveProps() {
//     console.log('componentWillReceiveProps');
//   }
//   componentWillUpdate() {
//     console.log('componentWillUpdate');
//   }
//   componentDidUpdate() {
//     console.log('componentDidUpdate');
//   }
//   componentWillUnmount() {
//     console.log('componentWillUnmount');
//   }
//   render() {
//     return (
//       <div onClick={this.handleClick}>Hi, {this.state.name}</div>
//     );
//   }
// }

// class UserGithub extends React.Component {
//     constructor(props) {
//         super(props);
//         this.state = {
//             username: '',
//             githubUrl: '',
//             avatarUrl: '',
//         }
//     }
//     componentDidMount() {
//         $.get(this.props.source, (result) => {
//             console.log(result);
//             const data = result;
//             if(data) {
//                 this.setState({
//                     username: data.name,
//                     githubUrl: data.html_url,
//                     avatarUrl: data.avatar_url,
//                 })
//             }
//         });
//     }
//     render() {
//         return (
//             <div>
//                 <a href = {this.state.githubUrl}>
//                     <h3>{this.state.username}</h3>
//                     <img src = {this.state.avatarUrl} />
//                 </a>
//             </div>
//         )
//     }
// }

// ReactDOM.render(<MyComponent />, document.getElementById('app'));

// // 将 <MyComponent /> 组件插入 id 为 app 的 DOM 元素中
// ReactDOM.render(<MyComponent />, document.getElementById('app'));

// ReactDOM.render(<HelloMessage />, document.getElementById('app'));

// ReactDOM.render(<HelloMessageAgain />, document.getElementById('app'));

// ReactDOM.render(<HelloMessageAgainFunctional name = 'Mark'/>, document.getElementById('app'));

// ReactDOM.render(<Timer />, document.getElementById('app'));

// ReactDOM.render(<TodoApp />, document.getElementById('app'));

// ReactDOM.render(<MarkdownEditor />, document.getElementById('app'));

// ReactDOM.render(<ComponentLife />, document.getElementById('app'));

// ReactDOM.render(<UserGithub source = 'https://api.github.com/users/bowiego' />, document.getElementById('app'));











